<template>
  <div class="canvaseBox">
    <div>
      <input type="color" v-model="lineColor" />
    </div>
    <canvas ref="containerRef" id="container"></canvas>
  </div>
</template>

<script setup lang="ts">
import { DrawCircle } from "./drawCircle.js";
// mousedown 鼠标按钮被按下时发生
// mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生
// mouseover 鼠标指针移出某个元素到另一个元素上时发生
// mouseup 鼠标按键被松开时发生
// mousemove 鼠标在某个元素上时持续发生
// mouseleave 当鼠标指针移出元素时触发
// mouseenter 当鼠标指针移动到元素上时触发。
import { ref, onMounted, onUnmounted } from "vue";

let lineColor = ref("");
const containerRef = ref();
// const

const mousedownMethods = e => {
  console.log("鼠标按下");
  // new DrawCircle()
  // startX =
  // startY =
};
const mouseupMethods = () => {
  console.log("鼠标按松开");
};
const mousemoveMethods = () => {
  console.log("鼠标滑动");
};
onMounted(() => {
  containerRef.value.addEventListener("mousedown", mousedownMethods);
  containerRef.value.addEventListener("mouseup", mouseupMethods);
  containerRef.value.addEventListener("mousemove", mousemoveMethods);
});
onUnmounted(() => {
  containerRef.value.removeEventListener("mousedown", mousedownMethods);
  containerRef.value.removeEventListener("mouseup", mouseupMethods);
  containerRef.value.removeEventListener("mousemove", mousemoveMethods);
});
</script>
<style lang="scss" scoped>
.canvaseBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
#container {
  width: 500px;
  height: 300px;
  background: #ccc;
  border: 1px solid #eee;
  border-radius: 5px;
}
</style>
